<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 300px;
				height: 300px;
				background-color: red;
			}
			div::before {
				display: inline-block;
				content: 'wo';
				width: 50px;
				height: 50px;
				background-color: green;
			}
			div::after {
				content: '小猪佩奇';
			}
			
			/* div::after权重是2 */
		</style>
	</head>
	<body>
		<h2>伪元素选择器 可以利用css来创建标签 而不用html 这样可以简化html结构</h2>
		<h2>比较常用的两个伪元素</h2>
		<ul>
			<li>::before 在元素内部的前面插入内容</li>
			<li>::after 在元素内部的后面插入内容</li>
		</ul>
		<h2>注意事项:</h2>
		<ul>
			<li>before和after创建一个元素，但是属于行内元素</li>
			<li>新创建的元素在文档树中找不到，所以称之为伪元素</li>
			<li>语法element::before{}</li>
			<li>before和after必须有content属性</li>
			<li>before在父元素内部的前面插入内容 而after在父元素内容的后面插入内容</li>
			<li>伪元素选择器和标签选择器一样权重为1</li>
		</ul>
		<h1>注意区分伪元素和伪类</h1>
		<div>是</div>
	</body>
</html>
